<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!-- 引入外部资源（与统一风格保持一致） -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题（与工作台、登录页统一） -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb', // 统一主色调：蓝色
                        secondary: '#64748b', // 辅助色：中性灰
                        dark: '#1e293b',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类和动画（保持风格统一） -->
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
        }

        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(2deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
    </style>
</head>
<body class="min-h-screen font-sans text-dark overflow-x-hidden bg-gradient-to-br from-slate-50 to-slate-100">
<!-- 背景装饰（与统一风格匹配，弱化视觉冲击） -->
<div class="fixed inset-0 bg-[url('')] opacity-30 z-0"></div>

<!-- 装饰性圆形元素（与登录页风格统一） -->
<div class="fixed top-20 -left-20 w-72 h-72 bg-primary/10 rounded-full blur-3xl animate-float"></div>
<div class="fixed bottom-20 -right-20 w-80 h-80 bg-primary/5 rounded-full blur-3xl animate-float" style="animation-delay: 2s;"></div>

<!-- 注册卡片容器 -->
<div class="relative z-10 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8">
    <div class="w-full max-w-md">
        <!-- 顶部标题区域（与系统品牌统一） -->
        <div class="text-center mb-8">
            <h2 class="text-[clamp(1.8rem,5vw,2.3rem)] font-bold text-primary text-shadow">
                <i class="fa fa-book mr-2"></i>我的笔记系统
            </h2>
            <p class="text-secondary mt-2">创建账号，开始记录你的想法</p>
        </div>

        <!-- 注册表单卡片（与工作台卡片风格统一） -->
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-slate-200 transition-all hover:shadow-xl">
            <form action="/login-itheimaservlet/register" method="post" class="p-6 sm:p-8">
                <!-- 1. 用户名输入框 -->
                <div class="mb-5">
                    <label for="username" class="block text-sm font-medium text-slate-700 mb-1">用户名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-user text-slate-400"></i>
                        </div>
                        <input
                                type="text"
                                id="username"
                                name="username"
                                required
                                maxlength="20"
                                class="block w-full pl-10 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus"
                                placeholder="请输入3-20位用户名"
                        >
                    </div>
                </div>

                <!-- 2. 邮箱输入框 -->
                <div class="mb-5">
                    <label for="email" class="block text-sm font-medium text-slate-700 mb-1">邮箱</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-envelope text-slate-400"></i>
                        </div>
                        <input
                                type="email"
                                id="email"
                                name="email"
                                required
                                pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
                                class="block w-full pl-10 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus"
                                placeholder="请输入邮箱（如xxx@example.com）"
                        >
                    </div>
                </div>

                <!-- 3. 密码输入框 -->
                <div class="mb-5">
                    <label for="password" class="block text-sm font-medium text-slate-700 mb-1">设置密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-slate-400"></i>
                        </div>
                        <input
                                type="password"
                                id="password"
                                name="password"
                                required
                                minlength="6"
                                class="block w-full pl-10 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus"
                                placeholder="请输入6-16位密码（含字母和数字）"
                        >
                    </div>
                </div>

                <!-- 4. 确认密码输入框 -->
                <div class="mb-6">
                    <label for="confirmPassword" class="block text-sm font-medium text-slate-700 mb-1">确认密码</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <i class="fa fa-lock text-slate-400"></i>
                        </div>
                        <input
                                type="password"
                                id="confirmPassword"
                                name="confirmPassword"
                                required
                                minlength="6"
                                class="block w-full pl-10 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus"
                                placeholder="请再次输入密码"
                        >
                    </div>
                </div>

                <!-- 5. 个人简介输入框 -->
                <div class="mb-6">
                    <label for="introduction" class="block text-sm font-medium text-slate-700 mb-1">个人简介</label>
                    <textarea
                            id="introduction"
                            name="introduction"
                            rows="4"
                            maxlength="200"
                            class="block w-full pl-3 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus resize-none"
                            placeholder="简单介绍一下自己（最多200字）"
                    ></textarea>
                    <p class="mt-1 text-xs text-slate-500">例如：兴趣爱好、特长、职业等</p>
                </div>

                <!-- 6. 验证码输入框 -->
                <div class="mb-6">
                    <label for="captcha" class="block text-sm font-medium text-slate-700 mb-1">验证码</label>
                    <div class="flex items-center space-x-3">
                        <input
                                type="text"
                                id="captcha"
                                name="captcha"
                                required
                                maxlength="4"
                                class="block w-1/2 pl-3 pr-3 py-3 bg-slate-50 border border-slate-200 rounded-lg transition-all input-focus"
                                placeholder="输入4位验证码"
                        >
                        <img src="/login-itheimaservlet/captcha"
                             onclick="this.src='/login-itheimaservlet/captcha?'+Math.random()"
                             class="h-12 rounded border border-slate-200 cursor-pointer hover:opacity-90 transition-opacity"
                             title="点击刷新">
                    </div>
                </div>

                <!-- 7. 用户协议复选框 -->
                <div class="flex items-start mb-6">
                    <div class="flex items-center h-5 mt-0.5">
                        <input id="agreeTerms" type="checkbox" name="agreeTerms" required class="w-4 h-4 bg-white border border-slate-300 rounded focus:ring-primary/50">
                    </div>
                    <label for="agreeTerms" class="ml-2 text-sm text-slate-700">
                        我已阅读并同意
                        <a href="#" class="text-primary hover:underline">《用户服务协议》</a>
                        和
                        <a href="#" class="text-primary hover:underline">《隐私政策》</a>
                    </label>
                </div>

                <!-- 8. 注册按钮（与统一风格按钮一致） -->
                <button
                        type="submit"
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-md hover:shadow-primary/20 flex items-center justify-center"
                >
                    <span>创建账号</span>
                    <i class="fa fa-check ml-2"></i>
                </button>

                <!-- 分隔线 -->
                <div class="relative my-6">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-slate-200"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-slate-500">或使用以下方式注册</span>
                    </div>
                </div>

                <!-- 社交登录选项（与统一风格一致） -->
                <div class="flex justify-center space-x-4">
                    <button type="button" class="w-11 h-11 rounded-full bg-slate-50 flex items-center justify-center text-[#07C160] hover:bg-white shadow-sm hover:shadow transition-all">
                        <i class="fa fa-weixin text-lg"></i>
                    </button>
                    <button type="button" class="w-11 h-11 rounded-full bg-slate-50 flex items-center justify-center text-[#12B7F5] hover:bg-white shadow-sm hover:shadow transition-all">
                        <i class="fa fa-qq text-lg"></i>
                    </button>
                    <button type="button" class="w-11 h-11 rounded-full bg-slate-50 flex items-center justify-center text-[#1DA1F2] hover:bg-white shadow-sm hover:shadow transition-all">
                        <i class="fa fa-twitter text-lg"></i>
                    </button>
                    <button type="button" class="w-11 h-11 rounded-full bg-slate-50 flex items-center justify-center text-[#333] hover:bg-white shadow-sm hover:shadow transition-all">
                        <i class="fa fa-github text-lg"></i>
                    </button>
                </div>
            </form>

            <!-- 底部登录提示（与统一风格一致） -->
            <div class="bg-slate-50 px-6 py-4 text-center border-t border-slate-100">
                <p class="text-sm text-slate-600">
                    已有账号?
                    <a href="login.html" class="font-medium text-primary hover:text-primary/80 transition-colors">立即登录</a>
                </p>
            </div>
        </div>

        <!-- 页脚版权信息（与系统统一） -->
        <div class="text-center mt-8 text-slate-500 text-sm">
            <p>© 2025 我的笔记系统 - 用技术记录生活</p>
        </div>
    </div>
</div>

<!-- 密码一致性校验（保留功能，优化样式反馈） -->
<script>
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirmPassword');

    // 实时校验密码一致性
    confirmPassword.addEventListener('input', function() {
        if (password.value && confirmPassword.value) {
            if (password.value === confirmPassword.value) {
                confirmPassword.classList.remove('border-red-500');
                confirmPassword.classList.add('border-green-500');
            } else {
                confirmPassword.classList.remove('border-green-500');
                confirmPassword.classList.add('border-red-500');
            }
        } else {
            // 清空时恢复默认样式
            confirmPassword.classList.remove('border-red-500', 'border-green-500');
        }
    });
</script>
</body>
</html>